<template>
	<view class="kui-padding">
		<!-- 搜索框 -->
		<uni-search-bar placeholder="搜索你想找的音乐" cancelButton="always" radius="72" :focus="true" @confirm="confirm" @input="inputting" @cancel="cancel" />
		<!-- 搜索历史 -->
		<view class="kui-margin-top">
			<view class="kui-flex kui-flex-space-between kui-flex-vcenter">
				<uni-title title="搜索历史"></uni-title>
				<uni-icons type="trash" color="#999999" @click="clearAllHistory" v-if="searchHistoryList.length > 0"></uni-icons>
			</view>
			<block v-if="searchHistoryList.length > 0" v-for="item in searchHistoryList">
				<uni-tag :text="item" type="" size="small" :circle="true" class="kui-margin-l-small kui-margin-b-small"></uni-tag>
			</block>
		</view>
		<!-- 热门搜索 -->
		<view class="kui-margin-top">
			<uni-title title="热门搜索"></uni-title>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="center">
				<!-- <uni-popup-dialog title=" " content="确认清空全部历史记录？" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog> -->
				<view class="kui-padding" style="width: 660rpx;">
					<view class="kui-flex-column kui-flex1 kui-bg-white kui-padding-vcenter kui-border-radius-small">
						<view class="kui-padding">
							<text class="kui-text-small1 kui-color-black9">确定清空全部历史记录？</text>
						</view>
						<view class="kui-padding kui-flex kui-flex-end kui-margin-top">
							<text class="kui-text kui-color-green" @tap="dialogClose">取消</text>
							<text class="kui-padding"></text>
							<text class="kui-text kui-color-green" @tap="dialogConfirm">清空</text>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchHistoryList: ['沙漠骆驼 李传胜', '沙漠骆驼', '自娱自乐', '三苦生', '海阔天空']
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
			inputting(e) {
				console.log(e);
			},
			cancel() {
				uni.navigateBack();
			},
			clearAllHistory() {
				this.$refs['alertDialog'].open();
			},
			dialogConfirm() {
				this.$refs['alertDialog'].close();
				console.log('点击确认')
				this.searchHistoryList = [];
				// this.messageText = `点击确认了 ${this.msgType} 窗口`
				// this.$refs.message.open()
			},
			dialogClose() {
				this.$refs['alertDialog'].close();
				console.log('点击关闭')
			}
		}
	}
</script>

<style>

</style>
